// 获取按钮
let ipts = document.querySelectorAll(".zhuce input");
let span = document.querySelectorAll(".zhuce span");
let btn = document.querySelector(".btn");
console.log(span);
console.log(btn);
let isUsername = false;
let isPassword = false;
ipts[0].onfocus = function () {
  // 获取焦点   当获取焦点时，提示注册规则，拿到span
  span[0].innerHTML = "6-18位，数字，字母 下划线，字母开头";
  //设置提示的文字颜色
  span[0].style.color = "gray";
};
ipts[0].onblur = function () {
  //   失去焦点  失去焦点时，判断是否满足正则
  let reg = /^[a-z]\w{5,17}$/i;

  //需要先判断注册账号长度
  if (this.value.length < 6) {
    span[0].innerHTML = "长度不足6位";
    // span.style.color = "red";
    isUsername = false;
  } else {
    //提示框内容大于6位，做一个正则判断
    if (reg.test(this.value)) {
      //满足  发起注册请求
      console.log("满足 发起请求");

      //1.发起请求   2.创建对象   3.使用axios 可以拿到服务器返回的数据
      axios
        .get(checknameAPI, {
          params: { username: ipts[0].value },
        })
        .then((res) => {
          //会获取到服务器返回的json字符串
          //将json字符串转为了js中对象
          let obj = res.data;
          console.log(obj);
          //obj.msg已经提示用户名是否可用，只需要把其放到span里
          span[0].innerHTML = obj.msg;
          //需要判断一下，obj.code是否为1，是的话可以用，else不可以用
          if (obj.code == 1) {
            //成功后提示变绿
            span[0].style.color = "green";
            //可以用
            isUsername = true;
          } else {
            span[0].style.color = "red";
            isUsername = false;
          }
        });
    } else {
      //不满足正则  提示 只能  输入6-18位,数字 字母 下划线，字母开头
      span[0].innerHTML = "只能输入数字 字母 下划线，需字母开头";
      //    span.style.color="red";
      isUsername = false;
    }
  }
};

//第二个密码框
ipts[1].onfocus = function () {
  //在span里面提示密码格式是否正确 nextElementSibling:下一个元素
  this.nextElementSibling.innerHTML = "6-1个字符，区分大小写";
};
ipts[1].onblur = function () {
  //失焦时做正则判断  \s 非空白开头
  let reg = /^\S{6,16}$/;
  if (reg.test(this.value)) {
    this.nextElementSibling.innerHTML = "";
    isPassword = true;
  } else {
    this.nextElementSibling.innerHTML =
      "格式有误，必须是6-16个字符，区分大小写";
    isPassword = false;
  }
};

//实现：一旦用户点击注册，regClick()就被执行了
btn.onclick = function () {
  regClick();
};
function regClick() {
  //点击注册时，需要判断 所有输入框的格式是否是正确的
  //如果都是正确的 发起注册请求  注册，如果不正确，什么都不做，即无法提交
  console.log("1");
  if (isUsername && isPassword) {
    //发起注册请求 用get请求 ，get请求后面需要传入一个username和一个password
    //http://jx.xuzhixiang.top/
    //Username和Password 里面的值是不固定的，需要根据输入框里输入的值来确定
    let username = ipts[0].value;
    let password = ipts[1].value;
    //一旦用户名和密码格式都正确后，可以在这里发起请求了
    axios
      .get(regAPI, {
        params: { username, password },
      })
      .then((res) => {
        let { data } = res; //解构赋值
        alert(data.msg);
        //做一个判断，如果注册成功跳转到登录页面
        if (data.code == 1) {
          console.log("shuru");
          location.href = "./login.html";
          //执行到这里，注册已经成功了
          //把注册的数据存到localStorage
          // localStorage
        }
      });
  } else {
  }
}
